<style lang="less" scoped>
.main-keyword-group {
    .btn-wrap {
        padding: 5px 0;
    }
    .online,
    .offline {
        margin-left: 0;
    }
    .second-row .manage-templet {
        margin-top: 5px;
    }
    .group {
        display: inline-block;
        vertical-align: top;
    }
}
</style>
<template>
    <div class="main main-keyword-group">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/keywords' }">用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="main-menus">
                <el-button type="primary" icon="plus" @click="editItem({}, '新增')">新增用户</el-button>
            </div>
        </div>
            <div class="main-filters">
            <el-form :inline="true" :model="query">
                <el-form-item label="角色">
                    <el-select v-model="query.role_id">
                        <el-option label="全部" value="" key=""></el-option>
                        <el-option
                            v-for="item in roles"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="main-actions">
            <div class="main-actions-label">
                共<em>{{itemsData.pagination.total}}</em>条
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column sortable="custom" prop="id" label="ID" width="80"></el-table-column>
            <el-table-column width="240" prop="name" label="用户"></el-table-column>
            <el-table-column width="240" prop="account" label="账号"></el-table-column>
            <el-table-column label="角色类型" inline-template>
                <div>
                    <span> {{row.role.name}}</span>
                </div>
            </el-table-column>
            <el-table-column label="操作" inline-template>
                <div class="btn-wrap">
                    <el-button size="small" @click="editItem(row, '编辑')">编辑</el-button>
                    <!-- <el-button size="small" type="danger" v-if="row.keywords.length < 1" @click="deleteItem(row)">删除</el-button> -->
                    <el-button size="small" type="danger" @click="deleteItem(row)">删除</el-button>
                </div>
            </el-table-column>
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        >
        </el-pagination>

        <el-dialog
            :title="editData.title"
            :visible.sync="editDialogVisible"
            size="tiny"
        >
            <el-form :model="editData">
                <el-form-item label="用户姓名">
                    <el-input v-model="editData.name" placeholder="输入用户姓名"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="editData.pwd" type="password" placeholder="输入用户密码"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select
                        v-model="editData.role_id">
                        <el-option
                            v-for="item in roles"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select
                        v-model="editData.department_id">
                        <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import ListController from '../controllers/list';

import UserModel from '../models/user';
import RoleModel from '../models/role';
import Department from '../models/department';

export default new ListController({
    data() {
        return {
            ListModel: UserModel,

            query: {
                page_num: 1,
                page_size: 20,
                role_id: '',
                department_id: 'all',
                sort: ''
            },

            roles: [],
            departments: [],

            editData: {
                department_id: 0,
                role_id: 0,
                name: '',
                pwd: '',
            },
            editDialogVisible: false
        };
    },
    methods: {
        beforeLoadItems() {
            if(this.$route.query.department_id && +this.$route.query.department_id > 0) {
                this.editData.department_id = +this.$route.query.department_id;
            }
            return Promise.all([
                this.loadRoles(),
                this.loadAppartments()
            ]);
        },
        debugItem(row) {
            this.$confirm('确认调试该项？')
            .then(() => {
                this.ListModel.update({
                    id: row.id,
                    status: 1
                }).$promise;
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        pullItem(row) {
            this.$confirm('确认重置该用户密码？')
            .then(() => {
                const params = Object.assign({}, row, {
                    id: row.id,
                    pwd: '123456'
                });
                this.ListModel.update(params).$promise;
            })
            .then(() => {
                this.$message({
                    message: '重置密码为123456成功,请尽快修改密码',
                    type: 'success'
                });

                this.loadItems();
            })
            .catch(err => {
                this.$message.error(err);
            });
        },
        pushItem(row) {
            this.$confirm('确认上线该项？')
            .then(() => {
                return this.ListModel.update({
                    id: row.id,
                    status: 1
                }).$promise
                .then(() => {
                    this.loadItems();
                });
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        deleteItem(row) {
            this.$confirm('确认删除该用户？')
            .then(() => {
                return this.ListModel.delete({
                    id: row.id
                }).$promise;
            })
            .then(() => {
                return this.loadItems();
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        editItem(row) {
            this.editDialogVisible = true;
        },
        submitEdit() {
            let params = null;
            let $submitPromise = null;

             if(!this.editData.name) {
                this.$message.error('请输入用户名称');
                return;
            }

            if(!this.editData.role_id) {
                this.$message.error('请选择角色类型');
                return;
            }

            if(!this.editData.department_id) {
                this.$message.error('请选择部门');
                return;
            }

            if(this.editData.id > 0) {
                $submitPromise = this.ListModel.update(this.editData).$promise;
            }
            else {
                params = Object.assign({}, this.editData);
                $submitPromise = this.ListModel.save(params).$promise;
            }

            $submitPromise
            .then(res => {
                if(res.code && res.code !== 200) {
                    this.$message.error(res.message);
                    return;
                }
                this.editDialogVisible = false;
                this.$message({
                    message: '提交成功！',
                    type: 'success'
                });
                this.loadItems();
            })
            .catch(err => {
                this.$message.error(err);
            });
        },
        loadRoles() {
            RoleModel.query()
            .$promise
            .then(roles => {
                this.roles = roles.items;
            })
        },
        loadAppartments() {
            return Department.query()
            .$promise
            .then(departments => {
                this.departments = departments.items;
            });
        }
    }
});
</script>
